<template>
  <div class="pagers">
    <ul>
      <li v-for="(item,i) in menuClass" @click="changeList(i+1)" :class="{choosed:i+1===current}">
        {{i+1}}{{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      menuClass: {
        type: Array,
        default: []
      },
      current: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        name: "pager"
      }
    },
    methods: {
      changeList(newPage) {
        this.$emit("input", newPage);
      }
    },
    components: {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pagers{
    flex: 0 0 auto;
    width: 110px;
}
.pagers ul{
    list-style: none;
    /* border: 1px solid #ddd; */
}
.pagers ul>li{
    box-sizing: border-box;
    background-color: #eee;
    padding-left: 18px;
    height: 50px;
    margin-bottom: 1px;
    line-height: 50px;
}
.pagers ul>li.choosed{
    background-color: #fefefe;
    color:#f40;
}
</style>